<template>
    <div class="home">
        <van-form 
            v-if="isShow1" 
            @submit="onSubmit1" 
            @failed="onFailed" 
            label-width="19vw" 
        >
            <van-field 
                v-model="formData.zupuname" 
                required 
                maxlength="9"
                name="zupuname" 
                label="族谱名称(姓氏+编号)" 
                placeholder="族谱名称(姓氏+编号)" 
                :rules="[{ required: true, message: '请填写族谱名称(姓氏+编号)' }]" 
            />
            <van-field 
                v-model="formData.cover" 
                required 
                name="cover" 
                center 
                label="族谱封面" 
                :rules="[{ required: true, message: '请上传族谱封面' }]"
            >
                <template #input>
                    <van-uploader 
                        v-model="cover" 
                        :max-count="1" 
                        upload-text="族谱封面" 
                        :before-delete="beforeDelete('cover')" 
                        :before-read="beforeRead" 
                        :after-read="afterRead('cover')" 
                    />
                </template>
            </van-field>
            <van-field 
                v-model="formData.backCover" 
                required 
                name="backCover" 
                center 
                label="族谱封底" 
                :rules="[{ required: true, message: '请上传族谱封底' }]"
            >
                <template #input>
                    <van-uploader 
                        v-model="backCover" 
                        :max-count="1" 
                        upload-text="族谱封底" 
                        :before-delete="beforeDelete('backCover')" 
                        :before-read="beforeRead" 
                        :after-read="afterRead('backCover')" 
                    />
                </template>
            </van-field>
            <FixedButton native-type="submit">确认</FixedButton>
        </van-form>
        <div 
            v-if="isShow2" 
            class="main"
        >
            <div class="add">
                <van-icon 
                    name="notes-o" 
                    color="#fff" 
                    size="10vw" 
                />
                <div class="add-text">已成功为您创建一本家庭谱，请您为家庭谱添加第1位成员信息吧</div>
                <van-button 
                    type="primary" 
                    plain 
                    @click="isShow2 = false; isShow3 = true;"
                >
                    开始添加成员
                </van-button>
            </div>
        </div>
        <van-form 
            v-if="isShow3" 
            @submit="onSubmit2" 
            @failed="onFailed" 
            label-width="19vw"
        >
            <Mytitle>基本信息</Mytitle>
            <van-field 
                v-model="formData.cm_surname" 
                required 
                name="cm_surname" 
                label="姓" 
                placeholder="姓" 
                :rules="[{ required: true, message: '请填写姓' }]" 
            />
            <van-field 
                v-model="formData.cm_name" 
                required 
                name="cm_name" 
                label="名" 
                placeholder="名" 
                :rules="[{ required: true, message: '请填写名' }]" 
            />
            <van-field 
                v-model="formData.cm_phone" 
                type="digit" 
                maxlength="11" 
                required 
                name="cm_phone" 
                label="手机号" 
                placeholder="手机号" 
                :rules="[{ required: true, message: '请填写手机号' }]" 
            />
            <van-field 
                v-if="isShaikh" 
                v-model="formData.power" 
                required name="power" 
                label="管理员" 
                placeholder="管理员" 
                :rules="[{ required: true, message: '请选择管理员' }]"
            >
                <template #input>
                    <van-radio-group 
                        v-model="formData.power" 
                        direction="horizontal"
                    >
                        <van-radio name="2">是</van-radio>
                        <van-radio name="0">否</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field 
                v-model="formData.cm_sex" 
                required 
                name="cm_sex" 
                label="性别" 
                placeholder="性别" 
                :rules="[{ required: true, message: '请选择性别' }]"
            >
                <template #input>
                    <van-radio-group 
                        v-model="formData.cm_sex"  
                        direction="horizontal"
                    >
                        <van-radio name="男">男</van-radio>
                        <van-radio name="女">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <template v-if="$route.query.cm_name != '配偶'">
                <!-- <div class="van-cell" style="color: red">排行依据性别区分，长子,长女排行均为1</div> -->
                <van-field 
                    v-model="formData.cm_familyrow"
                    readonly 
                    clickable 
                    required 
                    name="cm_familyrow" 
                    label="排行" 
                    placeholder="排行" 
                    :rules="[{ required: true, message: '请选择排行' }]" 
                    @click="showPicker1 = true" 
                />
            </template>
            <van-popup 
                v-model:show="showPicker1" 
                position="bottom"
            >
                <van-picker 
                    show-toolbar 
                    :columns="columns1" 
                    @confirm="onConfirm($event,'cm_familyrow','showPicker1')"
                    @cancel="showPicker1 = false"
                ></van-picker>
            </van-popup>

            <Mytitle>详细信息</Mytitle>
            <van-field 
                v-model="formData.cm_birthday" 
                readonly 
                clickable 
                name="cm_birthday" 
                label="生日" 
                placeholder="生日" 
                @click="showPicker2 = true" 
            />
            <van-popup 
                v-model:show="showPicker2" 
                position="bottom"
            >
                <van-date-picker 
                    type="date" 
                    :min-date="new Date('1900-01-01')" 
                    :max-date="new Date()" 
                    @confirm="onConfirmDate($event, 'cm_birthday', 'showPicker2')" 
                    @cancel="showPicker2 = false" 
                />
            </van-popup>

            <van-field 
                v-model="formData.cm_word" 
                name="cm_word" 
                label="字" 
                placeholder="字" 
            />
            <van-field 
                v-model="formData.cm_generation" 
                name="cm_generation" 
                label="字辈" 
                placeholder="字辈" 
            />
            <van-field 
                v-model="formData.cm_birth_place" 
                name="cm_birth_place" 
                label="出生地" 
                placeholder="出生地" 
            />
            <van-field 
                v-model="formData.cm_living_place" 
                name="cm_living_place" 
                label="现居地" 
                placeholder="现居地" 
            />
            <van-field 
                v-model="formData.cm_education_level" 
                name="cm_education_level" 
                label="教育程度" 
                placeholder="教育程度" 
            />
            <van-field 
                v-model="formData.cm_graduated_from" 
                name="cm_graduated_from" 
                label="毕业院校" 
                placeholder="毕业院校" 
            />
            <van-field 
                v-model="formData.cm_work_place" 
                name="cm_work_place" 
                label="工作单位" 
                placeholder="工作单位" 
            />

            <Mytitle>其他信息</Mytitle>
            <van-field 
                v-model="formData.cm_death_or_not" 
                name="cm_death_or_not" 
                label="是否在世" 
                placeholder="是否在世"
            >
                <template #input>
                    <van-radio-group 
                        v-model="formData.cm_death_or_not" 
                        direction="horizontal" 
                        @change="changeRadio('cm_dat1', 'cm_address', 'cm_posthumous_title')"
                    >
                        <van-radio name="是">是</van-radio>
                        <van-radio name="否">否</van-radio>
                    </van-radio-group>
                </template>
            </van-field>

            <div v-if="formData.cm_death_or_not == '否'">
                <van-field 
                    v-model="formData.cm_dat1" 
                    readonly 
                    clickable 
                    name="cm_dat1" 
                    label="逝世日期" 
                    placeholder="逝世日期" 
                    @click="showPicker3 = true" 
                />
                <van-popup 
                    v-model:show="showPicker3" 
                    position="bottom"
                >
                    <van-date-picker 
                        type="date" 
                        :min-date="new Date('1900-01-01')" 
                        :max-date="new Date()" 
                        @confirm="onConfirmDate($event, 'cm_dat1', 'showPicker3')" 
                        @cancel="showPicker3 = false" 
                    />
                </van-popup>

                <van-field 
                    v-model="formData.cm_address" 
                    name="cm_address" 
                    label="安葬地址" 
                    placeholder="安葬地址" 
                />
                <van-field 
                    v-model="formData.cm_posthumous_title" 
                    name="cm_posthumous_title" 
                    label="谥号" 
                    placeholder="谥号" 
                />
            </div>

            <van-field 
                v-model="formData.cm_relative_or_not" 
                name="cm_relative_or_not" 
                label="是否亲子" 
                placeholder="是否亲子"
            >
                <template #input>
                    <van-radio-group 
                        v-model="formData.cm_relative_or_not" 
                        direction="horizontal" 
                        @change="changeRadio('cm_kinship')"
                    >
                        <van-radio name="是">是</van-radio>
                        <van-radio name="否">否</van-radio>
                    </van-radio-group>
                </template>
            </van-field>

            <van-field 
                v-if="formData.cm_relative_or_not == '否'" 
                v-model="formData.cm_kinship" 
                name="cm_kinship" 
                label="亲属关系" 
                placeholder="亲属关系" 
            />
            <van-field 
                v-model="formData.cm_synopsis" 
                type="textarea" 
                rows="1" 
                autosize 
                center 
                name="cm_synopsis" 
                label="简介" 
                placeholder="简介" 
            />

            <!-- 第一次创建是没有删除的，或者家族人员只剩一人就不给删除 -->
            <FixedButton 
                v-if="type == 'create' || $route.query.isdel != 'Y'" 
                native-type="submit"
            >
                确认
            </FixedButton>
            <div 
                v-else 
                class="mbutton"
            >
                <div class="mbutton-box">
                    <van-button 
                        type="danger" 
                        native-type="button" 
                        style="width: 30vw;height: 100%;" 
                        @click="deleteUser"
                    >
                        删除
                    </van-button>
                    <van-button 
                        type="primary" 
                        native-type="submit" 
                        style="width: 70vw;height: 100%;"
                    >
                        确认
                    </van-button>
                </div>
            </div>
        </van-form>
    </div>
</template>

<script setup lang="ts">
    import { fileUploadBase64ExApi, saveClanInfoApi, saveClanMemberInfoApi, saveSpouseInfoApi, getSpouseInfoByIdApi, saveFatherInfoApi, delUserInfoApi, getClanByIdApi, ClanRedisLockApi, DelClanRedisLockApi } from '@/apis'
    import { compressImg } from '@/utils/utils'
    import { showDialog, showConfirmDialog, showLoadingToast, closeToast, showSuccessToast, showFailToast, showToast } from 'vant'
    import Mytitle from '@/components/MyTitle.vue'
    import FixedButton from '@/components/FixedButton.vue'
    import { markRaw, reactive, ref, toRaw, onMounted, onBeforeMount, readonly, onBeforeUnmount } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const route = useRoute()
    const router = useRouter()

    const basic: Ref<string> = ref('')
    const basicID: Ref<string> = ref('')
    const timeout: Ref<string> = ref('')
    const type: Ref<string> = ref(route.query.type)
    const isShow1: Ref<boolean> = ref(true)
    const isShow2: Ref<boolean> = ref(false)
    const isShow3: Ref<boolean> = ref(false)
    const isShaikh: Ref<boolean> = ref(localStorage.getItem('jiapu_power') == 1)
    const formData: Ref<any> = ref({
        power: '',
        cm_mainid: '',
        cm_surname: '',
        cm_name: '',
        cm_phone: '',
        cm_sex: '',
        cm_familyrow: '',
        cm_fatherid: '', //父亲id
        cm_motherid: '', //母亲id
        cm_spouseid: '', //配偶id
        cm_birthday: '',
        cm_seniorityrow: '', //"辈数排行"(参数值和排行一样)
        cm_word: '',
        cm_generation: '',
        cm_birth_place: '',
        cm_living_place: '',
        cm_education_level: '',
        cm_graduated_from: '',
        cm_work_place: '',
        cm_death_or_not: '',
        cm_dat1: '',
        cm_address: '',
        cm_posthumous_title: '',
        cm_relative_or_not: '',
        cm_kinship: '',
        cm_synopsis: '',
        cover: '', //族谱封面
        backCover: '', //族谱封底
        zupuname: '', //族谱名称
    })
    const cover: Ref<any[]> = ref([]) //族谱封面
    const backCover: Ref<any[]> = ref([]) //族谱封底
    const coverObj = reactive({
        cover,
        backCover
    })
    const showPicker1: Ref<boolean> = ref(false)
    const showPicker2: Ref<boolean> = ref(false)
    const showPicker3: Ref<boolean> = ref(false)
    const showPickerObj = reactive({
        showPicker1,
        showPicker2,
        showPicker3
    })
    // const columns1: Raw<any[]> = markRaw([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20])
    const columns1: Raw<any[]> = markRaw([
        {
            text: 1,
            value: 1
        },
        {
            text: 2,
            value: 2
        },
        {
            text: 3,
            value: 3
        },
        {
            text: 4,
            value: 4
        },
        {
            text: 5,
            value: 5
        },
        {
            text: 6,
            value: 6
        },
        {
            text: 7,
            value: 7
        },
        {
            text: 8,
            value: 8
        },
        {
            text: 9,
            value: 9
        },
        {
            text: 10,
            value: 10
        },
        {
            text: 11,
            value: 11
        },
        {
            text: 12,
            value: 12
        },
        {
            text: 13,
            value: 13
        },
        {
            text: 14,
            value: 14
        },
        {
            text: 15,
            value: 15
        },
        {
            text: 16,
            value: 16
        },
        {
            text: 17,
            value: 17
        },
        {
            text: 18,
            value: 18
        },
        {
            text: 19,
            value: 19
        },
        {
            text: 20,
            value: 20
        }
    ])
    onBeforeMount(() => {
        // 创建和改族谱名字要从第一个页面开始
        if (type.value != 'create' && type.value != 'editName' && type.value != 'firstCreate') {
            isShow1.value = false
            isShow3.value = true
        } else if (type.value == 'editName') {
            getClanByIdApi({
                company: '连云港人文纪念园智慧陵园管理系统',
                dw: '连云港人文纪念园',
                sId: route.query.cm_mainid
            }).then(res => {
                formData.value.cover = res.data[0].c_cover
                cover.value.push({
                    url: res.data[0].c_cover
                })
                formData.value.backCover = res.data[0].c_back_cover
                backCover.value.push({
                    url: res.data[0].c_back_cover
                })

                formData.value.zupuname = res.data[0].c_name

            }).catch(err => {
                showDialog({
                    title: '提示',
                    message: '网络异常，请稍后重试！',
                }).then(() => {
                });
            })
        } else if (type.value == 'firstCreate') {
            isShow1.value = false
            isShow3.value = true
            getClanByIdApi({
                company: '连云港人文纪念园智慧陵园管理系统',
                dw: '连云港人文纪念园',
                sId: route.query.cm_mainid
            }).then(res => {
                formData.value.cover = res.data[0].c_cover
                cover.value.push({
                    url: res.data[0].c_cover
                })
                formData.value.backCover = res.data[0].c_back_cover
                backCover.value.push({
                    url: res.data[0].c_back_cover
                })

                formData.value.zupuname = res.data[0].c_name
                formData.value.cm_mainid = res.data[0].c_id


            }).catch(err => {
                showDialog({
                    title: '提示',
                    message: '网络异常，请稍后重试！',
                }).then(() => {
                });
            })
        }
        if (type.value == 'editMate') {
            console.log('editMate')
            // 调接口上锁然后设置五分钟关闭页面
            basic.value = route.query.cm_name
            basicID.value = route.query.cm_spouseid ? route.query.cm_spouseid : route.query.cm_id
            ClanRedisLockApi({
                company: '连云港人文纪念园智慧陵园管理系统',
                dw: '连云港人文纪念园',
                basic: route.query.cm_name,
                basicID: route.query.cm_spouseid ? route.query.cm_spouseid : route.query.cm_id ,
            }).then(res => {
                if (res.data[0].code == 0) {
                    showDialog({
                        title: '提示',
                        message: res.data[0].msg,
                    }).then(() => {
                        router.back()
                    })
                } else {
                    timeout.value = setTimeout(() => {
                        showDialog({
                            title: '提示',
                            message: '您已超时，请稍后重试！',
                        }).then(() => {
                            router.back()
                        })
                    },1000 * 60 * 5)
                }
            })
            if (route.query.cm_spouseid && route.query.cm_id) {
                getSpouseInfoByIdApi({
                    company: '连云港人文纪念园智慧陵园管理系统',
                    dw: '连云港人文纪念园',
                    sId: route.query.cm_spouseid,
                }).then(res => {
                    formData.value = res.data[0]
                    formData.value.cm_mainid = route.query.cm_mainid
                })
            } else {
                formData.value.cm_mainid = route.query.cm_mainid
                // 给一个默认排行
                formData.value.cm_familyrow = 1
            }
        } else if (type.value == 'editMe' && route.query.cm_id) {
            // 调接口上锁然后设置五分钟关闭页面
            basic.value = route.query.cm_name
            basicID.value = route.query.cm_id
            ClanRedisLockApi({
                company: '连云港人文纪念园智慧陵园管理系统',
                dw: '连云港人文纪念园',
                basicID: route.query.cm_id,
                basic: route.query.cm_name,
                sId: route.query.cm_id
            }).then(res => {
                if (res.data[0].code == '0') {
                    showDialog({
                        title: '提示',
                        message: res.data[0].msg,
                    }).then(() => {
                        router.back()
                    })
                } else {
                    timeout.value = setTimeout(() => {
                        showDialog({
                            title: '提示',
                            message: '您已超时，请稍后重试！',
                        }).then(() => {
                            router.back()
                        })
                    },1000 * 60 * 5)
                }
            })
            getSpouseInfoByIdApi({
                company: '连云港人文纪念园智慧陵园管理系统',
                dw: '连云港人文纪念园',
                sId: route.query.cm_id,
            }).then(res => {
                formData.value = res.data[0]
                formData.value.cm_mainid = route.query.cm_mainid
            })
        } else if (type.value == 'editChildren') {
            // 调接口上锁然后设置五分钟关闭页面
            basic.value = route.query.cm_name
            basicID.value = route.query.cm_fatherid
            ClanRedisLockApi({
                company: '连云港人文纪念园智慧陵园管理系统',
                dw: '连云港人文纪念园',
                basic: route.query.cm_name,
                basicID: route.query.cm_fatherid,
            }).then(res => {
                if (res.data[0].code == 0) {
                    showDialog({
                        title: '提示',
                        message: res.data[0].msg,
                    }).then(() => {
                        router.back()
                    })
                } else {
                    timeout.value = setTimeout(() => {
                        showDialog({
                            title: '提示',
                            message: '您已超时，请稍后重试！',
                        }).then(() => {
                            router.back()
                        })
                    },1000 * 60 * 5)
                }
            })
            formData.value.cm_motherid = route.query.cm_motherid
            formData.value.cm_fatherid = route.query.cm_fatherid
            formData.value.cm_mainid = route.query.cm_mainid
        } else if (type.value == 'editFather') {
            // 调接口上锁然后设置五分钟关闭页面
            basic.value = route.query.cm_name
            basicID.value = route.query.cm_id
            ClanRedisLockApi({
                company: '连云港人文纪念园智慧陵园管理系统',
                dw: '连云港人文纪念园',
                basic: route.query.cm_name,
                basicID: route.query.cm_id,
            }).then(res => {
                if (res.data[0].code == 0) {
                    showDialog({
                        title: '提示',
                        message: res.data[0].msg,
                    }).then(() => {
                        router.back()
                    })
                } else {
                    timeout.value = setTimeout(() => {
                        showDialog({
                            title: '提示',
                            message: '您已超时，请稍后重试！',
                        }).then(() => {
                            router.back()
                        })
                    },1000 * 60 * 5)
                }
            })
            formData.value.cm_mainid = route.query.cm_mainid
        }
    })

    onBeforeUnmount(() => {
        console.log('onBeforeUnmount')
        console.log(formData.value)
        console.log(type.value)
        clearTimeout(timeout.value)
        if (type.value == 'editMate') {
            DelClanRedisLockApi({
                company: '连云港人文纪念园智慧陵园管理系统',
                dw: '连云港人文纪念园',
                basic: basic.value,
                basicID: basicID.value,
            })
        } else if (type.value == 'editMe' && basic.value) {
            DelClanRedisLockApi({
                company: '连云港人文纪念园智慧陵园管理系统',
                dw: '连云港人文纪念园',
                basic: basic.value,
                basicID: basicID.value,
            })
        } else if (type.value == 'editChildren') {
            DelClanRedisLockApi({
                company: '连云港人文纪念园智慧陵园管理系统',
                dw: '连云港人文纪念园',
                basic: basic.value,
                basicID: basicID.value,
            })
        } else if (type.value == 'editFather') {
            DelClanRedisLockApi({
                company: '连云港人文纪念园智慧陵园管理系统',
                dw: '连云港人文纪念园',
                basic: basic.value,
                basicID: basicID.value,
            })
        }
    })
    const changeRadio = (...args) => {
        args.forEach((item, index) => {
            formData.value[item] = ''
        })
    }
    const onConfirm = (val, field, isShow) => {
        console.log(val)
        formData.value[field] = val.selectedValues[0]
        showPickerObj[isShow] = false
    }
    const onConfirmDate = (date, field, show) => {
        console.log(date)
        // let YY = date.getFullYear() + '-';
        // let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        // let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        // formData.value[field] = YY + MM + DD;
        formData.value[field] = date.selectedValues.join('-');
        showPickerObj[show] = false;
    }
    const onFailed = (value) => {
        console.log(value)
        showDialog({
            title: '提示',
            message: value.errors[0].message
        })
    }
    const onSubmit1 = (value) => {
        if (!(localStorage.getItem('jiapu_power') == 1 || localStorage.getItem('jiapu_power') == 2)) {
            //    没有权限
            showDialog({
                title: '提示',
                message: '您没有修改权限,请联系族长授权为管理员！'
            }).then(() => {
            });
            return false
        }
        showLoadingToast({
            message: '加载中...',
            overlay: true,
            forbidClick: true,
            duration: 0
        })
        saveClanInfoApi({
            name: formData.value.zupuname,
            cover: formData.value.cover,
            backCover: formData.value.backCover,
            phone: route.query.phone,
            sId: route.query.cm_mainid ? route.query.cm_mainid : '',
            company: '连云港人文纪念园智慧陵园管理系统',
            dw: '连云港人文纪念园',
        }).then(res => {
            closeToast()
            if (res.status == '+OK') {
                showDialog({
                    title: '提示',
                    message: '提交成功！',
                }).then(() => {
                    if (type.value == 'editName') {
                        router.push('familyTree?cm_mainid=' + route.query.cm_mainid)
                    } else {
                        formData.value.cm_mainid = res.sId
                        isShow1.value = false
                        isShow2.value = true
                    }

                });
            } else {
                showDialog({
                    title: '提示',
                    message: res.msg,
                }).then(() => {
                });
            }

        }).catch(err => {
            closeToast()
            showDialog({
                title: '提示',
                message: '网络异常，请稍后重试！',
            }).then(() => {
            });
        })
    }
    const onSubmit2 = (value) => {
        if (!(localStorage.getItem('jiapu_power') == 1 || localStorage.getItem('jiapu_power') == 2)) {
            //    没有权限
            showDialog({
                title: '提示',
                message: '您没有修改权限,请联系族长授权为管理员！'
            }).then(() => {
            });
            return false
        }
        showLoadingToast({
            message: '加载中...',
            overlay: true,
            forbidClick: true,
            duration: 0
        })
        formData.value.cm_seniorityrow = formData.value.cm_familyrow

        if (type.value == 'editMate') {
            formData.value.cm_spouseid = route.query.cm_id
                saveSpouseInfoApi({
                data: JSON.stringify(formData.value),
                    company: '连云港人文纪念园智慧陵园管理系统',
                    dw: '连云港人文纪念园',
                sId: route.query.cm_spouseid ? route.query.cm_spouseid : '',
                basic: route.query.cm_name,
                basicID: route.query.cm_spouseid ? route.query.cm_spouseid : route.query.cm_id ,
            }).then(res => {
                closeToast()
                if (res.status == '+OK') {
                    showDialog({
                        title: '提示',
                        message: '提交成功！',
                    }).then(() => {
                        router.push('/relativeGraph?cm_mainid=' + formData.value.cm_mainid)
                    });
                } else {
                    showDialog({
                        title: '提示',
                        message: '提交失败！',
                    }).then(() => {
                    });
                }
            }).catch(err => {
                closeToast()
                showDialog({
                    title: '提示',
                    message: '网络异常，请稍后重试！',
                }).then(() => {
                });
            })
        } else if (type.value == 'editChildren') {
            saveClanMemberInfoApi({
                data: JSON.stringify(formData.value),
                basic: route.query.cm_name,
                basicID: route.query.cm_fatherid,
                company: '连云港人文纪念园智慧陵园管理系统',
                dw: '连云港人文纪念园',
                sId: ''
            }).then(res => {
                closeToast()
                if (res.status == '+OK') {
                    showDialog({
                        title: '提示',
                        message: '提交成功！',
                    }).then(() => {
                        router.push('/relativeGraph?cm_mainid=' + formData.value.cm_mainid)
                    });
                } else {
                    showDialog({
                        title: '提示',
                        message: res.msg,
                    }).then(() => {
                    });
                }
            }).catch(err => {
                closeToast()
                showDialog({
                    title: '提示',
                    message: '网络异常，请稍后重试！',
                }).then(() => {
                });
            })
        } else if (type.value == 'editFather') {
            saveFatherInfoApi({
                company: '连云港人文纪念园智慧陵园管理系统',
                dw: '连云港人文纪念园',
                data: JSON.stringify(formData.value),
                basic: route.query.cm_name,
                basicID: route.query.cm_id,
                sId: route.query.cm_id
            }).then(res => {
                closeToast()
                if (res.status == '+OK') {
                    showDialog({
                        title: '提示',
                        message: '提交成功！',
                    }).then(() => {
                        router.push('/relativeGraph?cm_mainid=' + formData.value.cm_mainid)
                    });
                } else {
                    showDialog({
                        title: '提示',
                        message: '提交失败！',
                    }).then(() => {
                    });
                }
            }).catch(err => {
                closeToast()
                showDialog({
                    title: '提示',
                    message: '网络异常，请稍后重试！',
                }).then(() => {
                });
            })
        } else if (type.value == 'editMe') {
            saveClanMemberInfoApi({
                data: JSON.stringify(formData.value),
                basic: route.query.cm_name,
                basicID: route.query.cm_id,
                company: '连云港人文纪念园智慧陵园管理系统',
                dw: '连云港人文纪念园',
                sId: route.query.cm_id
            }).then(res => {
                closeToast()
                if (res.status == '+OK') {
                    showDialog({
                        title: '提示',
                        message: '提交成功！',
                    }).then(() => {
                        router.push('/relativeGraph?cm_mainid=' + formData.value.cm_mainid)
                    });
                } else {
                    showDialog({
                        title: '提示',
                        message: res.msg,
                    }).then(() => {
                    });
                }
            }).catch(err => {
                closeToast()
                showDialog({
                    title: '提示',
                    message: '网络异常，请稍后重试！',
                }).then(() => {
                });
            })
        } else {
            saveClanMemberInfoApi({
                data: JSON.stringify(formData.value),
                company: '连云港人文纪念园智慧陵园管理系统',
                dw: '连云港人文纪念园',
                // basic: route.query.cm_name,
                // basicID: route.query.cm_id,
                sId: ''
            }).then(res => {
                closeToast()
                if (res.status == '+OK') {
                    showDialog({
                        title: '提示',
                        message: '提交成功！',
                    }).then(() => {
                        router.push('/relativeGraph?cm_mainid=' + formData.value.cm_mainid)
                    });
                } else {
                    showDialog({
                        title: '提示',
                        message: res.msg,
                    }).then(() => {
                    });
                }
            }).catch(err => {
                closeToast()
                showDialog({
                    title: '提示',
                    message: '网络异常，请稍后重试！',
                }).then(() => {
                });
            })
        }
    }

    const deleteUser = () => {
        showConfirmDialog({
            title: '提示',
            message: '是否确定删除！'
        }).then(() => {
            if (!(localStorage.getItem('jiapu_power') == 1 || localStorage.getItem('jiapu_power') == 2)) {
                //    没有权限
                showDialog({
                    title: '提示',
                    message: '您没有修改权限,请联系族长授权为管理员！'
                }).then(() => {
                });
                return false
            }
            showLoadingToast({
                message: '加载中...',
                overlay: true,
                forbidClick: true,
                duration: 0
            })
            let delId = ''
            if (type.value == 'editMe') {
                delId = route.query.cm_id
            } else if (type.value == 'editMate') {
                delId = route.query.cm_spouseid
            }
            delUserInfoApi({
                company: '连云港人文纪念园智慧陵园管理系统',
                dw: '连云港人文纪念园',
                sId: delId
            }).then(res => {
                closeToast()
                if (res.status == '+OK') {
                    showDialog({
                        title: '提示',
                        message: '提交成功！',
                    }).then(() => {
                        router.push('/relativeGraph?cm_mainid=' + formData.value.cm_mainid)
                    });
                } else {
                    showDialog({
                        title: '提示',
                        message: res.msg,
                    }).then(() => {
                    });
                }
            }).catch(err => {
                closeToast()
                showDialog({
                    title: '提示',
                    message: '网络异常，请稍后重试！',
                }).then(() => {
                });
            })
        }).catch(() => {

        })
    }
    const afterRead = (imgField) => {
        return file => {
            file.status = 'uploading';
            file.message = '上传中...';
            // 执行压缩图片并上传
            let obj = new compressImg(file, afterRead2, imgField, file)
            console.log(obj)
        }
    }
    const afterRead2 = (imgField, file, obj) => {
        // failed done 
        // file.status = 'uploading';
        // file.message = '上传中...';
        // file.file: 文件 file.content: base64图片
        console.log(file)
        // let f = new FormData()
        // f.append('file', file.file)
        fileUploadBase64ExApi({
            // data: obj.myfb,
            data: obj,
            sCode: 'tzmz'
        }).then(res => {
            file.status = 'done';
            file.message = '上传完成';
            console.log(res)
            formData.value[imgField] = res[0].url

        }).catch(err => {
            file.status = 'failed';
            file.message = '上传失败';
            console.log(coverObj[imgField])
            coverObj[imgField].pop()
            showFailToast('上传失败')
            console.log(err)
        })
    }
    const beforeRead = (file) => {
        console.log(file)
        if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
            showToast('请上传 jpg/png 格式图片');
            return false;
        }
        return true;
    }
    const beforeDelete = (val) => {
        return (file, name) => {
            formData.value[val] = ''
            return true
        }
    }
</script>

<style lang='scss' scoped>
.home {
    width: 100vw;
    height: 100vh;
     //background: url('@/assets/bg/bg6.png');
    // background-size: 100% 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(115px);
}
 .home::before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     filter: blur(3px);
     background: url('@/assets/bg/bg6.png') no-repeat 100% 100%;
     background-size: cover;
     // opacity: .8;
     z-index: -1;
 }

.main {
    flex: 1;
    overflow: scroll;
    box-sizing: border-box;
    @include padding-global;
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    .add {
        // width: 300px;
        // padding-top: 100px;
        padding: 100px 46px 0;
    }
    .add-text {
        color: #fff;
        padding: 20px 0;
    }
}
:deep(.van-form) {
    // height: 550px;
    // height: 510px;
    flex: 1;
    overflow: scroll;
    .van-cell {
        background: rgba(255,255,255,0.9);
    }
}
.mbutton {
    height: 50px;
    .mbutton-box {
        position: fixed;
        bottom: 0;
        height: 50px;
        font-size: 17px;
    }
}
</style>
